<template>
	<view>
		<view class="bw-upload">
			<view v-for="(a_item,a_index) in imgList" class="bw-img" :key="a_index">
				<image :src="a_item.url" @click="preview(a_item.url)"></image>
				<!-- 上传进度条 -->
				<Progress :addGray="false" :progressWidth="a_item.progressWidth"
					v-if="a_item.progressWidth > 0"></Progress>
				<button class="delete-img" @click="deleteimg(a_item)">删除</button>
			</view>
			<view class="bw-uploading" @click="choose" v-if="imgnum > 1">
				<text class="iconfont icon-a-shangchuan upload"></text>
				<text class="bw-upload-text">请选择图片</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Progress from '../bw-progress/bw-progress.vue';
	export default {
		components: {
			Progress
		},
		props: {
			uploadUrl: { //目标服务器
				type: String,
				default: 'http://vue_admin.shenzhenbenwo.com/api/upload/upload'
			},
			imgnum: { //最大上传数
				type: Number,
				default: 2
			},
			formData: { //上传时所携带的参
				type: Object,
				default: null
			},
			header: { //上传文件时所携带的请求头
				type: Object,
				default: null
			},
			uploadType: { //上窜文件到服务器的文件类型
				type: String,
				default: 'image'
			}
		},
		data() {
			return {
				imgList: [],
			}
		},
		methods: {
			//选择图片
			choose() {
				const th_is = this;
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						this.imgList[this.imgList.length] = Object.assign({
							url: chooseImageRes.tempFilePaths[0],
							progressWidth: 0,
							index: this.imgList.length,
							code:Math.floor(Math.random()*1000+1)
						});
						this.imgList = this.imgList.filter(Boolean);
						th_is.upload(th_is.imgList[this.imgList.length - 1]);
					}
				});
				th_is.$emit('imgNum', th_is.imgList);
			},
			upload(gather) {
				const th_is = this;
				uni.showLoading({
					title: '正在上传中'
				});
				var uploadTask = uni.uploadFile({
					url: th_is.uploadUrl,
					header: th_is.header,
					filePath: gather.url,
					name: 'file',
					fileType: th_is.uploadType,
					formData: th_is.formData,
					success: (uploadFileRes) => {
						if (JSON.parse(uploadFileRes.data).status > 200) {
							uni.showToast({
								title: '上传失败',
								icon: 'none',
								duration: 2000
							});
						} else {
							th_is.$emit('Success', {
								gather: gather,
								then: JSON.parse(uploadFileRes.data)
							});
							setTimeout(function() {
								uni.showToast({
									title: '上传成功',
									icon: 'none',
									duration: 2000
								});
							}, 500);
						}
						uni.hideLoading();
					},
					fail(err) {
						th_is.$emit('Fail', err);
						uni.hideLoading();
						setTimeout(function() {
							uni.showToast({
								title: '上传失败',
								icon: 'none',
								duration: 2000
							});
						}, 500);
					},
					complete(res) {
						if (res.statusCode > 200) {
							uni.hideLoading();
							setTimeout(function() {
								uni.showToast({
									title: '上传失败',
									icon: 'none',
									duration: 2000
								});
							}, 500);
						}
						th_is.$emit('Complete', res);
					}
				});
				th_is.uploadtask(uploadTask, gather);
			},
			//监听上传状态
			uploadtask(e, gather) {
				const th_is = this;
				//取消上传
				// e.abort((res) => {
				// 	console.log(res);
				// 	uni.showToast({
				// 		title: '取消成功',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// });

				//监听上传进度变化
				e.onProgressUpdate((res) => {
					console.log('上传进度' + res.progress);
					console.log('已经上传的数据长度' + res.totalBytesSent);
					console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
					th_is.imgList[gather.index].progressWidth = Number(res.progress);
				});
			},
			//删除图片
			deleteimg(e) {
				const th_is = this;
				uni.showModal({
					title: '提示',
					content: '是否删除该图片?',
					success: function(res) {
						if (res.confirm) {
							th_is.$emit('deleteImg',th_is.imgList[e.index]);
							const imgs = th_is.imgList.filter(item => item.index !== e.index);
							th_is.imgList = imgs;
							uni.showToast({
								title: '删除成功！',
								icon: 'none',
								duration: 2000
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//预览图片
			preview(url) {
				uni.previewImage({
					urls: [url],
					longPressActions: {
						success: function(data) {
							console.log(data);
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../iconfont.scss";

	.bw-upload {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.bw-img {
			margin-left: 40rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;

			image {
				width: 180rpx;
				height: 180rpx;
			}
		}

		.bw-uploading {
			width: 200rpx;
			height: 200rpx;
			margin-left: 30rpx;
			margin-top: 40rpx;
			display: flex;
			background-color: #e3e8ef;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			border-radius: 10rpx;

			.upload {
				font-size: 90rpx;
				color: #9b9ea2;
			}

			.bw-upload-text {
				font-size: 25rpx;
				color: #929292;
			}
		}
	}

	.delete-img {
		width: 85%;
		margin: 0px auto;
		height: 50rpx;
		line-height: 50rpx;
		border: none;
		font-size: 29rpx;
		background-color: #007AFF;
		color: #FFFFFF;
	}
</style>
